<template>
  <div class="create-club-container">
    <div class="content-wrapper">
      <h1>社团入驻申请</h1>
      <el-card class="form-card">
        <el-form ref="clubFormRef" :model="clubForm" :rules="rules" label-width="120px">
          <el-form-item label="社团名称" prop="name">
            <el-input v-model="clubForm.name" placeholder="请输入社团名称" />
          </el-form-item>
          
          <el-form-item label="社团类别" prop="category">
            <el-select v-model="clubForm.category" placeholder="请选择社团类别">
              <el-option label="学术科技" value="academic" />
              <el-option label="文化艺术" value="cultural" />
              <el-option label="体育竞技" value="sports" />
              <el-option label="公益志愿" value="volunteer" />
              <el-option label="创业创新" value="innovation" />
              <el-option label="其他" value="other" />
            </el-select>
          </el-form-item>
          
          <el-form-item label="社团简介" prop="description">
            <el-input v-model="clubForm.description" type="textarea" :rows="4" placeholder="请输入社团简介" />
          </el-form-item>
          
          <el-form-item label="社团标志" prop="logo">
            <el-upload
              class="avatar-uploader"
              action="/api/upload/"
              :show-file-list="false"
              :on-success="handleLogoUpload"
              :before-upload="beforeLogoUpload"
            >
              <img v-if="clubForm.logo" :src="clubForm.logo" class="avatar" />
              <div v-else class="avatar-placeholder">
                <el-icon><Plus /></el-icon>
                <div>上传社团标志</div>
              </div>
            </el-upload>
            <div class="upload-hint">支持JPG、PNG格式，建议尺寸200x200像素</div>
          </el-form-item>
          
          <el-form-item label="联系人" prop="contact_person">
            <el-input v-model="clubForm.contact_person" placeholder="请输入联系人姓名" />
          </el-form-item>
          
          <el-form-item label="联系电话" prop="contact_phone">
            <el-input v-model="clubForm.contact_phone" placeholder="请输入联系电话" />
          </el-form-item>
          
          <el-form-item label="联系邮箱" prop="contact_email">
            <el-input v-model="clubForm.contact_email" placeholder="请输入联系邮箱" />
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="submitForm">提交申请</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { activityApi } from '@/api'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

const router = useRouter()
const clubForm = reactive({
  name: '',
  category: '',
  description: '',
  logo: '',
  contact_person: '',
  contact_phone: '',
  contact_email: ''
})

const rules = {
  name: [
    { required: true, message: '请输入社团名称', trigger: 'blur' },
    { min: 2, max: 100, message: '社团名称长度在 2 到 100 个字符', trigger: 'blur' }
  ],
  category: [
    { required: true, message: '请选择社团类别', trigger: 'change' }
  ],
  description: [
    { required: true, message: '请输入社团简介', trigger: 'blur' },
    { min: 10, max: 1000, message: '社团简介长度在 10 到 1000 个字符', trigger: 'blur' }
  ],
  contact_person: [
    { required: true, message: '请输入联系人姓名', trigger: 'blur' }
  ],
  contact_phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  contact_email: [
    { pattern: /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/, message: '请输入正确的邮箱地址', trigger: 'blur' }
  ]
}

const clubFormRef = ref()

// 提交表单
const submitForm = async () => {
  try {
    await clubFormRef.value.validate()
    // 提交数据到后端
    console.log('提交的社团数据:', clubForm)
    
    // 准备提交数据，处理logo字段
    const submitData = { ...clubForm }
    
    // 如果logo是空字符串，从提交数据中移除该字段
    if (submitData.logo === '') {
      delete submitData.logo
    }
    
    const res = await activityApi.createClub(submitData)
    ElMessage.success('社团入驻申请提交成功！等待审核。')
    // 跳转到社团列表页
    setTimeout(() => {
      router.push('/activity')
    }, 1500)
  } catch (error) {
    console.error('提交社团申请失败:', error)
    console.error('错误详情:', error.response ? error.response.data : error)
    // 显示具体的错误信息
    if (error.response && error.response.data && error.response.data.message) {
      ElMessage.error(error.response.data.message)
    } else {
      ElMessage.error('提交失败，请重试')
    }
  }
}

// 重置表单
const resetForm = () => {
  clubFormRef.value.resetFields()
}

// 上传前检查
const beforeLogoUpload = (file) => {
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isJPG) {
    ElMessage.error('上传头像图片只能是 JPG/PNG 格式!')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('上传头像图片大小不能超过 2MB!')
    return false
  }
  return true
}

// 上传成功处理
const handleLogoUpload = (response) => {
  // 假设后端返回图片URL
  clubForm.logo = response.data.url
}
</script>

<style scoped>
.create-club-container {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding: 20px 0;
}

.content-wrapper {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.create-club-container h1 {
  text-align: center;
  margin-bottom: 30px;
  color: #303133;
}

.form-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.avatar-uploader {
  display: flex;
  justify-content: center;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

.avatar-placeholder {
  width: 120px;
  height: 120px;
  border: 1px dashed #dcdfe6;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #c0c4cc;
  cursor: pointer;
  transition: all 0.3s;
}

.avatar-placeholder:hover {
  border-color: #4096ff;
  color: #4096ff;
}

.upload-hint {
  margin-top: 10px;
  color: #909399;
  font-size: 12px;
}
</style>